<template>
  <el-sub-menu
    v-if="menu.children && menu.children.length >= 1"
    :index="menu.id"
    :key="menu.id"
    :popper-append-to-body="false"
  >
    <template #title>
      <el-icon>
        <Menu />
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>
    <t-menu v-for="item in menu.children" :menu="item" :key="item.id"></t-menu>
  </el-sub-menu>
  <el-menu-item v-else :index="menu.id" @click="handleRouter(menu)">
    <el-icon>
      <Menu />
    </el-icon>
    <template #title>
      <span>{{ menu.name }}</span>
    </template>
  </el-menu-item>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useMenuStore } from "../../../store/index";
import router from "../../../router";

const menuStore = useMenuStore();

const props = defineProps({
  menu: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const handleRouter = (menuData: any) => {
  // tab标签页选中, 如果不存在则先添加
  var tab = menuStore.editableTabs.filter(
    (item) => item.name === menuData.name
  )[0];
  if (!tab) {
    tab = {
      name: menuData.name,
      path: menuData.path,
      id: menuData.id,
    };
    // 改变tab数组
    menuStore.$patch((state) => {
      state.editableTabs = state.editableTabs.concat(tab);
    });
  }
  // 改变高亮导航
  menuStore.$patch((state) => {
    state.activeIndex = menuData.id;
    state.editableTabsValue = menuData.id;
  });
  router.push(menuData.path);
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
